<template>
	<a-spin :spinning="loading" :style="'height:' + height">
		<div :style="'height:' + height">
			<template v-for="(item,index) in srcList">
				<iframe v-show="item === $route.meta.urlInsidePageUrl" :src="getSrc(item)" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
			</template>
		</div>
	</a-spin>
</template>
<script>
import Vue from "vue";
import { ACCESS_TOKEN } from '@/store/mutation-types'
export default {
	data() {
		return {
			src: '',
			height: document.documentElement.clientHeight - 134 + 'px',
			loading: true,
			srcList: []
		}
	},
	watch: {
		$route: {
			handler: function (val, oldVal) {
				this.innitPage(val)
			},
			deep: true,
			immediate: true
		},
		srcList: {
			handler: function(val){
				console.log(val)
			}
		}
	},
	computed: {
		getSrc(){
			return (e) => {
				return e.replace('${token}', Vue.ls.get(ACCESS_TOKEN))
			}
		}
	},
	beforeDestroy() {
		this.destroyResizeEvent();
	},
	mounted: function () {
		this.resizeHandler();
		this.initResizeEvent();
	},
	methods: {
		resizeHandler() {
			this.height = document.documentElement.clientHeight - 134 + 'px'
		},
		innitPage(route) {
			// this.src = this.$route.meta.urlInsidePageUrl.replace('${token}', Vue.ls.get(ACCESS_TOKEN));
			const index = this.srcList.indexOf(this.$route.meta.urlInsidePageUrl);
			if(this.$route.meta.urlInsidePageUrl && index === -1){
				this.srcList.push(this.$route.meta.urlInsidePageUrl);
			}
			setTimeout(() => {
				this.loading = false
			}, 200)
		},
		//监听resize
		initResizeEvent() {
		  window.addEventListener("resize", this.resizeHandler, false);
		},
		//移除resize
		destroyResizeEvent() {
		  window.removeEventListener("resize", this.resizeHandler);
		}
	}
}
</script>
